<!--
选择区间日期组件
width     =====>   表单宽度

Event
change    =====>   日期选择后事件

-->
<template>
  <div class="base-flex base-rows base-align-items-center">
    <a-date-picker v-model:value="defaultValue[0]" :style="{minWidth: width}" @change="(time, timeStr) => onChange(0, time, timeStr)"></a-date-picker>
    <span class="base-ml10 base-mr10">至</span>
    <a-date-picker v-model:value="defaultValue[1]" :style="{minWidth: width}" @change="(time, timeStr) => onChange(1, time, timeStr)"></a-date-picker>
    <div class="base-flex base-rows base-ml10">
      <span class="base-text primary base-pointer" @click="setSearchFormDate(1)">今</span>
      <span class="base-text primary base-ml15 base-pointer" @click="setSearchFormDate(2)">昨</span>
      <span class="base-text primary base-ml15 base-pointer" @click="setSearchFormDate(3)">近七天</span>
      <span class="base-text primary base-ml15 base-pointer" @click="setSearchFormDate(4)">近30天</span>
      <span class="base-text primary base-ml15 base-pointer" @click="setSearchFormDate(5)">近1年</span>
    </div>
  </div>
</template>
<script setup>
import dayjs from 'dayjs'
import { ref, watch } from 'vue'
const emit = defineEmits(['change'])
const defaultValue = ref(['', ''])
const props = defineProps({
  width: {
    type: String,
    default: '180px'
  },
})
const setSearchFormDate = (status) => {
  let date = ['', '']
  switch (status) {
    case 1:
      // 今
      date = [dayjs().add(0, 'd'), dayjs()]
      break
    case 2:
      // 昨
      date = [dayjs().add(-1, 'd'), dayjs()]
      break
    case 3:
      // 近七天
      date = [dayjs().add(-7, 'd'), dayjs()]
      break
    case 4:
      // 近30天
      date = [dayjs().add(-30, 'd'), dayjs()]
      break
    case 5:
      // 近1年
      date = [dayjs().add(-1, 'y'), dayjs()]
      break
  }
  defaultValue.value = date
  emit('change', [
    dayjs(date[0]).format('YYYY-MM-DD'),
    dayjs(date[1]).format('YYYY-MM-DD')
  ])
  // emit('update:value', date)
}

const onChange = (pos, time, timeStr) => {
  if(pos === 0) {
    // 开始时间
    defaultValue.value[0] = time
  }else{
    // 结束时间
    defaultValue.value[1] = time
  }
  emit('change', [
    defaultValue.value[0] ? dayjs(defaultValue.value[0]).format('YYYY-MM-DD') : '',
    defaultValue.value[1] ? dayjs(defaultValue.value[1]).format('YYYY-MM-DD') : ''
  ])
}
</script>
<style scoped lang="scss">

</style>
